DatePicker: Year dropdown becomes unwieldy with large minDate/maxDate range

[ggdouglas]

Description

When configuring the DatePicker (or DateInput) component with a large date range using the minDate and maxDate props, the year dropdown becomes excessively long. This is especially apparent when the range spans many decades or centuries (e.g., 1900–2099). The dropdown, which is rendered as a native HTML <select>, can easily overflow the viewport and become difficult to use, as it displays every year in the range as a separate option.

Example:

<DateInput3
    minDate={new Date("01/01/1900")}
    maxDate={new Date("01/01/2099")}
/>

https://codesandbox.io/p/sandbox/glhd7t

This issue is particularly problematic for use cases that require selecting dates far in the past or future, such as historical data entry or analysis. The long dropdown not only clutters the UI but also makes it hard for users to efficiently select a year.

Additionally, because the dropdown uses the native HTML <select> element, it is difficult to apply custom styles or limit its height, making it challenging to mitigate the UX issues through CSS alone.

Environment

Package version(s): v5.x
Browser name and version: Chrome 136.0.7103.93

Steps to Reproduce

1. Render a DateInput or DatePicker with a large date range (e.g., 1900–2099).
2. Open the year dropdown.
3. Observe that the dropdown is extremely tall and may overflow the viewport.

Expected Behavior

The year dropdown should remain usable and visually manageable, even when the date range is large. Ideally, it should not overflow the viewport, and users should be able to quickly navigate to the desired year.

Actual Behavior

The dropdown displays every year in the range, resulting in a very tall menu that can be difficult to use and visually overwhelming.

Possible Solutions

1. Replace the native <select> with a custom Blueprint select component for the month and year dropdowns. This would allow for better control over the dropdown’s appearance, scrolling behavior, and styling, and could enable features like virtualized lists or search/filter for years.
2. Implement virtual scrolling or pagination in the year dropdown to limit the number of visible options at once.
3. Allow for custom rendering or styling of the dropdown via props, so consumers can better control the UX for large ranges.